<!doctype html>
<html>

<head>
  <title>Socket.IO chat</title>
  <meta charset="utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>

<body>
  <!-- 消息列表 -->
  <ul id="messages"></ul>

  <!-- 发送消息的表单 -->
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>

  <!-- SocketIO 提供了一个客户端实现：socket.io.js -->
  <script src="./libs/socket.io.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
  <script>
    // 建立连接，得到 socket 通信对象
    var socket = io('http://localhost:3000')

    socket.on('connect', () => {
      console.log('建立连接成功了')
    })

    $('form').submit(function (e) {
      e.preventDefault();
      // 用socket.io这个包发消息是emit
      // 原生的websocket是用send
      socket.emit('chat message', $('#m').val());
      $('#messages').append($('<li>').text('我说:' + $('#m').val()));
      $('#m').val('');
      return false;
    });
    // 收来服务器的消息：用on
    socket.on('chat message', function (msg) {
      $('#messages').append($('<li>').text('服务器:' + msg));
    });
  </script>
</body>

</html>